<template>
  <!--pages/login/index.wxml-->
  <view class="apply_box">
    <mineNavbar :styleData="styleData"></mineNavbar>
    <view class="a_contain">
      <view class="c_navigate">
        <view>
          <view v-for="item in applyTypeArr" :key="item.id" class="c_item" :class="activeType === item.id ? 'active' : ''"
            @click="handleActive(item.id)">
            <view>{{ item.name || '' }}</view>
            <view class="bootom_line" v-if="activeType === item.id"></view>
          </view>
        </view>
      </view>
      <scroll-view class="c_list" v-if="applyList.length" scroll-y @scrolltolower="scrollBottomFn">
        <view class="l_item" v-for="item in applyList" :key="item">
          <view class="i_one" @click="handleGoDetail(item)">
            <view :style="{ background: getTypeColorFun(item.positionType) }">{{ item.positionTypeLabel || '' }}
            </view>
            <view>{{ item.positionName || '' }}</view>
          </view>
          <view class="i_two" @click="handleGoDetail(item)">
            <text>￥</text>
            <text v-if="item.positionType !== '1'">{{ item.startSalary || '' }}~{{ item.endSalary || '' }}</text>
            <text v-else>{{ item.startSalary || '' }}</text>
            <text>/{{ item.salaryPeriodLabel || '' }}</text>
          </view>
          <view class="i_three" @click="handleGoDetail(item)">
            <image src="../../../../static//images/recruit/icon1.png" />
            <text>{{ item.fullName || '' }}</text>
          </view>
          <view class="i_four">
            <view :style="{ color: getStatusColorFun(item.status) }">{{ item.statusLabel || '' }}</view>
            <view @click="handleOperateBtn(item)">{{ getStatusTextFun(item.status) }}</view>
          </view>
        </view>
        <view class="downLoad">-- 加载完成，共{{ applyList.length }}条数据 --</view>
      </scroll-view>
      <noneState v-else></noneState>
    </view>
    <rateDialog v-if="showDialog" @changeDialogShow="changeDialogShow" :seekerLogId="seekerLogId" @upDate="upDate">
    </rateDialog>
    <checkRateDialog v-if="showRateDialog" @changeRateDialogShow="changeRateDialogShow" :seekerLogId="seekerLogId"
      @upDate="upDate">
    </checkRateDialog>
  </view>
</template>
  
<script>
import { cancelApply, getApplyForList } from "@/api/pages/mine.js";
import noneState from "@/pages/recruit/components/noneState.vue";

import checkRateDialog from "./checkRateDialog/index.vue";
import rateDialog from "./rateDialog/index.vue";

export default {
  components: { rateDialog, checkRateDialog, noneState },
  data() {
    return {
      styleData: {
        show: true,
        tabbarText: "我的投递/申请",
      },
      pageSize: 10,
      pageNum: 1,
      pageTotal: 1,
      applyTypeArr: [
        {
          id: "",
          name: "全部",
        },
        {
          id: 0,
          name: "申请中",
        },
        {
          id: 2,
          name: "被录用",
        },
        {
          id: 1,
          name: "被拒绝",
        },
        {
          id: 3,
          name: "已到岗",
        },
        {
          id: 4,
          name: "未到岗",
        },
        {
          id: 5,
          name: "已取消",
        },
        {
          id: 6,
          name: "待评价",
        },
        {
          id: 7,
          name: "已评价",
        },
      ],
      activeType: "",
      applyList: [],
      showDialog: false,
      showRateDialog: false,
      seekerLogId: "",
    };
  },
  computed: {},
  watch: {},
  async onLoad(options) {
    this.getApplyForListFun();
  },
  async onShow() {
    this.pageNum = 1
  },
  onReady() { },
  mounted() { },
  methods: {
    // 切换类型
    handleActive(e) {
      console.log(e);
      this.pageNum = 1;
      this.activeType = e;
      this.getApplyForListFun();
    },
    //获取我的申请列表
    getApplyForListFun() {
      getApplyForList({
        states: this.activeType,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }).then((res) => {
        if (res.code == 200) {
          this.pageTotal = Math.ceil(res.total / this.pageSize);
          if (this.pageNum === 1) {
            this.applyList = res.rows;
          } else {
            res.rows.forEach((suc) => {
              this.applyList.push(suc);
            });
          }
        }
      });
    },
    getApplyForListFunMore() {
      getApplyForList({
        states: this.activeType,
        pageNum: 1,
        pageSize: this.pageSize,
      }).then((res) => {
        if (res.code == 200) {
          this.applyList = res.rows;
        }
      });
    },
    // 获取类型颜色
    getTypeColorFun(positionType) {
      if (positionType === "1") {
        return "#34A1FF";
      }
      if (positionType === "2") {
        return "#71C465";
      }
      if (positionType === "3") {
        return "#F32763";
      }
    },
    // 获取状态颜色
    getStatusColorFun(status) {
      if (status === "0") {
        return "#FF9E24";
      }
      if (status === "2") {
        return "#34A1FF";
      } else {
        return "#00000073";
      }
    },
    // 获取状态buttonkuang文字
    getStatusTextFun(status) {
      if (status === "0") {
        return "取消申请";
      }
      if (status === "1" || status === "5") {
        return "查看岗位";
      }
      if (status === "2" || status === "3" || status === "4") {
        return "联系企业";
      }
      if (status === "6") {
        return "立即评价";
      }
      if (status === "7") {
        return "查看评价";
      }
    },
    // 跳转岗位详情
    handleGoDetail(item) {
      uni.navigateTo({
        url:
          "/pages/recruit/post/postDetail/index?positionId=" +
          item.positionId,
      });
    },
    // 每个类型的动态点击事件
    handleOperateBtn(item) {
      if (item.status === "0") {
        cancelApply(item.seekerLogId).then((res) => {
          if (res.code === 200) {
            this.getApplyForListFun();
            uni.showToast({
              title: "取消成功",
            });
            this.getApplyForListFunMore()
          }
        });
      }
      if (item.status === "1" || item.status === "5") {
        uni.navigateTo({
          url:
            "/pages/recruit/post/postDetail/index?positionId=" +
            item.positionId,
        });
      }
      if (item.status === "2" || item.status === "3" || item.status === "4") {
        uni.showActionSheet({
          title: "拨打电话",
          itemList: [item.mobile],
          success: function (res) {
            if (!res.cancel && res.tapIndex !== undefined) {
              uni.makePhoneCall({
                phoneNumber: item.mobile,
              });
            }
          },
        });
      }
      if (item.status === "6") {
        this.seekerLogId = item.seekerLogId;
        this.showDialog = true;
      }
      if (item.status === "7") {
        this.seekerLogId = item.seekerLogId;
        this.showRateDialog = true;
      }
    },
    upDate() {
      this.pageNum = 1
      this.getApplyForListFun()
    },
    // 改变立即评价弹窗
    changeDialogShow(e) {
      console.log(e);
      this.showDialog = e;
    },
    // 改变查看评价弹窗
    changeRateDialogShow(e) {
      console.log(e);
      this.showRateDialog = e;
    },
    // 监听滑动到底部
    scrollBottomFn() {
      this.pageNum += 1;
      if (this.pageNum <= this.pageTotal) {
        this.getApplyForListFun();
      } else {
        uni.showToast({
          title: "没有更多了",
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
/* pages/login/index.wxss */
.apply_box {
  width: 100%;

  .a_contain {
    width: 100%;

    .c_navigate {
      height: 100rpx;
      width: 100%;
      overflow: auto;

      >view {
        width: 950rpx;
        height: 100%;
        display: flex;
        background: #fff;

        .c_item {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 32rpx;
          color: #00000073;
          position: relative;

          .bootom_line {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 18rpx;
            height: 10rpx;
            background: #ff9e24;
            border-radius: 5rpx;
          }
        }

        .active {
          color: #101010;
        }
      }
    }

    .c_list {
      width: 100%;
      height: calc(100vh - 220rpx);
      display: flex;
      flex-direction: column;
      overflow: auto;
      padding: 0 24rpx;

      .l_item {
        width: 702rpx;
        height: 324rpx;
        padding: 0 24rpx;
        box-sizing: border-box;
        font-size: 24rpx;
        background: #fff;
        margin: 10rpx 0;
        border-radius: 16rpx;
        overflow: hidden;

        >view {
          display: flex;
          align-items: center;
        }

        .i_one {
          margin-top: 10rpx;
          margin-bottom: 40rpx;

          >view:first-child {
            padding: 4rpx 12rpx;
            color: #fff;
            border-radius: 6rpx;
            margin-right: 10rpx;
          }

          >view:last-child {
            font-size: 32rpx;
            color: #000000e0;
          }
        }

        .i_two {
          >text:nth-child(2) {
            font-size: 32rpx;
            color: #ff9e24;
            margin-left: 5rpx;
          }
        }

        .i_three {
          margin: 20rpx 0;

          image {
            width: 28rpx;
            height: 28rpx;
            margin-right: 10rpx;
          }

          text {
            font-size: 24rpx;
            color: #000000a3;
          }
        }

        .i_four {
          justify-content: space-between;
          border-top: 1px #f0f0f0 solid;
          height: 110rpx;

          >view:last-child {
            width: 170rpx;
            height: 64rpx;
            border: 1px solid #00000033;
            border-radius: 44rpx;
            color: #000000e0;
            line-height: 64rpx;
            text-align: center;
          }
        }
      }

      .downLoad {
        font-size: 24rpx;
        color: #00000033;
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        margin-bottom: 20rpx;
      }
    }
  }
}
</style>
  